<template>
  <view class="container">
    <view class="header-area" :style="{ paddingTop: safeHeight + 'px' }">
      <view class="header-content">
        <view class="welcome-text">
          <text class="greeting">今日精选</text>
          <text class="date-display">{{ $dayjs().format('M月D日') }}</text>
        </view>
      </view>

      <view class="banner-area">
        <swiper
          class="banner-swiper"
          indicator-dots
          autoplay
          circular
          :interval="3000"
          :indicator-active-color="indicatorActiveColor"
          :indicator-color="indicatorColor"
        >
          <swiper-item
            v-for="(item, index) in hotGoodsList.slice(0, 3)"
            :key="index"
            class="banner-item"
            @tap="goToDetail(item)"
          >
            <view class="banner-content">
              <image
                class="banner-image"
                :src="item.picUrl"
                mode="aspectFill"
              ></image>
              <view class="banner-info">
                <text class="banner-title">{{ item.name }}</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <view class="cake-service-container">
      <view class="service-intro">
        <view class="service-title-group">
          <text class="service-title">定制您的完美蛋糕</text>
          <text class="service-subtitle">每一口都是幸福的味道</text>
        </view>
        <view class="service-action" @tap="showReservationInfo">
          <text class="action-text">了解详情</text>
          <text class="action-icon">→</text>
        </view>
      </view>
    </view>

    <view class="product-section">
      <view class="section-header">
        <text class="section-title">热销推荐</text>
      </view>
      <scroll-view
        scroll-x
        class="product-scroll"
        enhanced
        :show-scrollbar="false"
      >
        <view class="product-list">
          <view
            class="product-item"
            v-for="(item, index) in hotGoodsList"
            :key="index"
            @tap="goToDetail(item)"
          >
            <view class="product-image-container">
              <image
                class="product-image"
                :src="item.picUrl"
                mode="aspectFill"
              ></image>
            </view>
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
              <view class="product-brief">{{ item.brief }}</view>
              <view class="product-price">¥{{ item.retailPrice }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="product-section">
      <view class="section-header">
        <text class="section-title">新品上市</text>
      </view>
      <view class="new-products-grid">
        <view
          class="new-product-item"
          v-for="(item, index) in newGoodsList"
          :key="index"
          @tap="goToDetail(item)"
        >
          <view class="product-image-container">
            <image
              class="product-image"
              :src="item.picUrl"
              mode="aspectFill"
            ></image>
          </view>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <view class="product-brief">{{ item.brief }}</view>
            <view class="product-price">¥{{ item.retailPrice }}</view>
          </view>
        </view>
      </view>
    </view>

    <u-popup
      :show="showReservationPopup"
      mode="center"
      border-radius="12"
      @close="closePopup"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">预订说明</text>
          <text class="popup-close" @tap="closePopup">×</text>
        </view>
        <view class="popup-body">
          <view
            class="info-item"
            v-for="(notice, index) in deliveryNotices"
            :key="index"
          >
            <text class="info-title">{{ notice.title }}</text>
            <text class="info-desc">{{ notice.content }}</text>
          </view>
          <view class="wechat-contact">
            <text class="contact-title">客服微信</text>
            <image
              class="wechat-qrcode"
              :src="shopInfo.qrcode"
              mode="widthFix"
              show-menu-by-longpress
            ></image>
            <text class="contact-hint">长按二维码添加客服微信</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      hotGoodsList: [],
      newGoodsList: [],
      safeHeight: 0,
      loading: true,
      deliveryNotices: [],
      showReservationPopup: false,
      indicatorActiveColor: '#FFFFFF',
      indicatorColor: 'rgba(255,255,255,0.4)'
    }
  },
  computed: {
    ...mapGetters({
      shopInfo: 'shop/shopInfo'
    })
  },
  onLoad() {
    // 获取胶囊按钮位置相关信息
    const menuInfo = this.getWXStatusHeight()
    // 设置安全高度，使顶部内容与胶囊按钮上下对齐
    this.safeHeight = menuInfo.barTop
    this.getData()
    this.fetchShopInfo()
  },
  // 添加下拉刷新配置
  onPullDownRefresh() {
    // 显示刷新动画
    uni.showNavigationBarLoading()

    // 刷新数据
    Promise.all([this.getData(), this.fetchShopInfo()])
      .then(() => {
        // 隐藏刷新动画
        uni.hideNavigationBarLoading()
        // 完成下拉刷新
        uni.stopPullDownRefresh()
      })
      .catch(() => {
        // 发生错误时也要隐藏刷新动画
        uni.hideNavigationBarLoading()
        uni.stopPullDownRefresh()
      })
  },
  methods: {
    ...mapActions({
      fetchShopInfo: 'shop/getShopInfo'
    }),
    async getData() {
      try {
        const { data } = await this.$get('home/index')
        this.hotGoodsList = data.hotGoodsList
        this.newGoodsList = data.newGoodsList
      } catch (error) {
        console.log(error)
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    },
    // 获取配送须知数据
    async getDeliveryNotices() {
      try {
        const { data: notices } = await this.$get('delivery/notice/list')
        this.deliveryNotices = notices
      } catch (error) {
        console.log(error)
        uni.showToast({
          title: '获取配送须知失败',
          icon: 'none'
        })
      }
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/product-detail/index?id=${item.id}`,
        success: (res) => {
          res.eventChannel.emit('sendTestValue', item)
        }
      })
    },
    getWXStatusHeight() {
      // 获取距上
      const barTop = wx.getSystemInfoSync().statusBarHeight
      // 获取胶囊按钮位置信息
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
      
      return {
        barTop
      }
    },
    showReservationInfo() {
      this.getDeliveryNotices() // 在打开弹窗前获取最新数据
      this.showReservationPopup = true
    },
    closePopup() {
      this.showReservationPopup = false
    }
  },
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: '用心制作每一个难忘瞬间',
      path: '/pages/home/index'
    }
  },
  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: '精美蛋糕定制，用心制作每一个难忘瞬间',
      query: '',
      imageUrl: this.hotGoodsList[0]?.picUrl || ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/common/mixins.scss';

// 更新设计系统色彩 - 文字只使用黑灰白
$color-primary: #69a97a; // 绿色主色
$color-primary-light: #e0f0e5; // 浅绿色

// 文字颜色只使用黑灰白三种
$color-text-black: #333333; // 黑色文字
$color-text-gray: #999; // 灰色文字
$color-text-white: #ffffff; // 白色文字

$color-background: #f7fcf9; // 浅绿色背景
$color-background-light: #ffffff; // 白色背景
$color-border: #eaf5ef; // 边框颜色

// 透明度颜色
$color-black-70: rgba(0, 0, 0, 0.7); // 70%黑色透明度
$color-white-40: rgba(255, 255, 255, 0.4); // 40%白色透明度
$color-transparent: transparent; // 完全透明

// 圆角
$radius-medium: 20rpx;
$radius-large: 32rpx;
$radius-small: 3rpx;
$radius-pill: 30rpx;

// 阴影
$shadow-button: 0 6rpx 16rpx rgba(105, 169, 122, 0.16);
$shadow-container: 0 8rpx 24rpx rgba(105, 169, 122, 0.08);


// 基础容器
.container {
  padding: 0 0 40rpx 0;
  min-height: 100vh;
  background-color: $color-background;
}

// 头部区域样式更新
.header-area {
  position: relative;
  background: linear-gradient(
    to bottom,
    $color-primary-light,
    $color-background
  );
  padding-bottom: 30rpx;

  .header-content {
    padding: 20rpx 30rpx 36rpx 30rpx;

    .welcome-text {
      .greeting {
        font-size: 48rpx;
        font-weight: 700;
        color: $color-text-black;
        letter-spacing: 2rpx;
        line-height: 1.2;
        position: relative;
        display: inline-block;

        &::after {
          content: '';
          position: absolute;
          bottom: -8rpx;
          left: 0;
          width: 60rpx;
          height: 6rpx;
          background-color: $color-primary;
          border-radius: $radius-small;
        }
      }

      .date-display {
        font-size: 28rpx;
        color: $color-text-gray;
        margin-top: 16rpx;
        display: block;
      }
    }
  }
}

// 轮播区域
.banner-area {
  padding: 0 24rpx 20rpx;

  .banner-swiper {
    height: 400rpx;
    border-radius: $radius-large;
    overflow: hidden;
    box-shadow: $shadow-container;

    .banner-item {
      .banner-content {
        position: relative;
        width: 100%;
        height: 100%;

        .banner-image {
          width: 100%;
          height: 100%;
        }

        .banner-info {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 40rpx 30rpx 30rpx;
          background: linear-gradient(to top, $color-black-70, $color-transparent);

          .banner-title {
            color: $color-text-white;
            font-size: 36rpx;
            font-weight: 600;
            @include text-ellipsis;
          }
        }
      }
    }
  }
}

// 蛋糕服务区域 - 简化设计
.cake-service-container {
  margin: 0 24rpx;
  border-radius: $radius-large;
  overflow: hidden;
  background-color: $color-background-light;
  box-shadow: $shadow-container;

  .service-intro {
    padding: 36rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .service-title-group {
      .service-title {
        font-size: 34rpx;
        font-weight: 600;
        color: $color-text-black;
        margin-bottom: 8rpx;
        display: block;
      }

      .service-subtitle {
        font-size: 24rpx;
        color: $color-text-gray;
      }
    }

    .service-action {
      display: flex;
      align-items: center;
      padding: 12rpx 24rpx;
      border-radius: $radius-pill;
      background-color: $color-primary-light;
      border: 1rpx solid $color-primary;
      box-shadow: $shadow-button;
      transition: all 0.3s ease;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(105, 169, 122, 0.10);
      }

      .action-text {
        font-size: 24rpx;
        color: $color-primary;
        font-weight: 600;
      }

      .action-icon {
        margin-left: 8rpx;
        font-size: 24rpx;
        color: $color-primary;
        font-weight: 600;
      }
    }
  }
}

// 商品区域 - 无背景贴边设计
.product-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 24rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 700;
      color: $color-text-black;
      position: relative;
    }
  }
}

// 热销商品滚动区 - 修改为贴边设计
.product-scroll {
  .product-list {
    display: flex;
    padding: 0 0 0 24rpx;

    .product-item {
      flex-shrink: 0;
      width: 260rpx;
      margin-right: 10rpx;
      background: $color-background-light;
      border-radius: $radius-medium;
      overflow: hidden;
      border: 1rpx solid $color-border;

      .product-image-container {
        width: 100%;
        height: 260rpx;
        position: relative;
        overflow: hidden;

        .product-image {
          width: 100%;
          height: 100%;
        }
      }

      .product-info {
        padding: 16rpx;

        .product-name {
          font-size: 26rpx;
          font-weight: 600;
          color: $color-text-black;
          @include text-ellipsis;
        }

        .product-brief {
          font-size: 22rpx;
          color: $color-text-gray;
          margin-top: 6rpx;
          height: 60rpx;
          @include multi-ellipsis(2);
        }

        .product-price {
          font-size: 26rpx;
          font-weight: 600;
          color: $color-text-black;
        }
      }
    }
  }
}

// 新品上市网格 - 修改为贴边设计
.new-products-grid {
  padding: 0 24rpx 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10rpx;

  .new-product-item {
    background: $color-background-light;
    border-radius: $radius-medium;
    overflow: hidden;
    position: relative;
    border: 1rpx solid $color-border;

    .product-image-container {
      width: 100%;
      height: 350rpx;
      position: relative;

      .product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .product-info {
      padding: 16rpx;

      .product-name {
        font-size: 26rpx;
        color: $color-text-black;
        font-weight: 600;
        @include text-ellipsis;
      }

      .product-brief {
        font-size: 22rpx;
        color: $color-text-gray;
        margin-top: 6rpx;
        height: 56rpx;
        @include multi-ellipsis(2);
      }

      .product-price {
        font-size: 26rpx;
        color: $color-text-black;
        font-weight: 600;
      }
    }
  }
}

// 弹窗样式
.popup-content {
  width: 640rpx;
  background: $color-background-light;
  border-radius: $radius-medium;
  overflow: hidden;
  box-shadow: $shadow-container;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 30rpx;
    border-bottom: 1rpx solid $color-border;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $color-text-black;
    }

    .popup-close {
      font-size: 36rpx;
      color: $color-text-gray;
      padding: 10rpx;
    }
  }

  .popup-body {
    padding: 20rpx 30rpx;
    max-height: 70vh;

    .info-item {
      margin-bottom: 20rpx;

      .info-title {
        font-size: 28rpx;
        font-weight: 600;
        color: $color-text-black;
        margin-bottom: 8rpx;
        display: block;
      }

      .info-desc {
        font-size: 26rpx;
        color: $color-text-gray;
        line-height: 1.5;
        display: block;
      }
    }

    .wechat-contact {
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid $color-border;
      text-align: center;

      .contact-title {
        font-size: 28rpx;
        font-weight: 600;
        color: $color-text-black;
        margin-bottom: 16rpx;
        display: block;
      }

      .wechat-qrcode {
        width: 240rpx;
        height: auto;
        margin: 0 auto;
      }

      .contact-hint {
        font-size: 24rpx;
        color: $color-text-gray;
        margin-top: 16rpx;
        display: block;
      }
    }
  }
}
</style>
